<template>
	<view class="wrap">
		<view class="detail_top">
            <image class="avatar" :src="turtleMes.turtle_url" mode="aspectFill" />
            <view class="top_right">
                <view class="right_box">
                    <view class="box_left">名字 : </view>
                    <view class="box_right">{{turtleMes.turtle_name}}</view>
                </view>
                <view class="right_box">
                    <view class="box_left">品种 : </view>
                    <view class="box_right">{{turtleMes.turtle_varieties}}</view>
                </view>
                <view class="right_box">
                    <view class="box_left">年龄 : </view>
                    <view class="box_right">{{turtleMes.turtle_age}}</view>
                </view>
                <view class="right_box">
                    <view class="box_left">记录次数 : </view>
                    <view class="box_right">{{recordList.length}}</view>
                </view>
            </view>
        </view>
        <view class="detail_content">
            <view class="record_list">
                <u-swipe-action
					bg-color="rgb(250, 250, 250)"
					@open="openRecord"
					:disabled="disabled"
					:index="index"
                    v-for="(item,index) in recordList"
                    :key="item._id"
					:show="item.show"
					@click="tabChoice"
					:btn-width="btnWidth"
					@close="close"
					:options="options"
					@content-click="contentClick"
                >
                    <view class="record_item" @click="toRecordDetail(item._id)">
                        <view class="date_title" v-text="item.record.title"></view>
                        <view class="date_mes" v-text="item.record.time"></view>
                    </view>
                </u-swipe-action>
            </view>
        </view>
        <view class="add_record" @click="toAddRecord">
            <image class="add_record_img" src="../../static/record/add_record.png" mode="" />
        </view>
	</view>
</template>

<script>
	import USwipeAction from '@/components/u-swipe-action/u-swipe-action.vue';
	export default {
		components: {
			USwipeAction
		},
		data() {
			return {
				theId: "",
                turtleMes: {},
                recordList: [],
                // 左滑删除-相关参数
                disabled: false,
                show: false,
                btnWidth: 180,
                options: [
		     		// {
                    //     text: '收藏',
                    //     style: {
                    //         backgroundColor: '#007aff'
                    //     }
                    // },
                    {
                        text: '删除',
                        style: {
                            backgroundColor: '#dd524d'
                        }
                    }
		     	]
			}
		},
		
		methods: {
            getTurtle(){
                const that = this;
                uniCloud.callFunction({
                    name: 'findTurtle',
                    data: {
                        _id: this.theId
                    },
                    success(res) {
                        const result = res.result;
                        if (result.code == 200) {
                            that.turtleMes = result.data.data[0];
                        }
                    },
                    fail(e) {
                        console.log(e);
                    }
                })
            },
            getRecordList(){
                const that = this;
                uniCloud.callFunction({
                    name: 'findRecordList',
                    data: {
                        _id: this.theId
                    },
                    success(res) {
                        const result = res.result;
                        if (result.code == 200) {
                            that.recordList = result.data.data;
                            that.recordList.forEach(item=>{
                                item.show = false;
                            })
                        }
                    },
                    fail(e) {
                        console.log(e);
                    }
                })
            },
			toRecordDetail(id) {
				uni.navigateTo({
					url: `/pages/recordPages/recordDetail?id=${id}`
				})
			},
            toAddRecord(){
				uni.navigateTo({
					url: `/pages/recordPages/addRecord?id=${this.turtleMes._id}`
				})
            },

            // 左滑删除
            openRecord(index) {
	     		
                this.$set(this.recordList, index, { ...this.recordList[index], show: true })
	     		this.recordList.map((val, idx) => {
	     			if (index != idx) this.recordList[idx].show = false;
	     		});
	     	},
            tabChoice(index, type) {
                const that = this;
	     		if(type == 0) {
                    let item = this.recordList[index];
                    uni.showModal({
						title: `删除记录`,
						content:  `您确定删除该条记录吗`,
						showCancel: true,
						success: function (res) {
							if (res.confirm) {
								uniCloud.callFunction({
									name: 'removeOfRecord',
									data: {
										_id: item._id,
									},
									success(res) {
                                        if(resw.code == 200) {
	     			                        that.recordList.splice(index, 1);
                                            uni.showToast({
                                                duration: 2000,
                                                icon: "success",
                                                title: "删除成功",
                                            });
                                        } else {
                                            uni.showToast({
                                                duration: 2000,
                                                icon: "none",
                                                title: res.message
                                            });
                                        }
									},
									fail(e) {
										console.log(e);
									}
								})
							} else if (res.cancel) {
                                that.close(index);
							}
						}
					});
	     		} else {
	     			// this.recordList[index].show = false;
	     		}
	     	},
	     	close(index) {
                this.$set(this.recordList, index, { ...this.recordList[index], show: false })
                this.$forceUpdate();
	     	},
	     	contentClick(index) {
	     		// console.log(index);
	     	},
		},
		onLoad(option) {
			this.theId = option.id;
            this.getTurtle();
		},
        onShow(){
            this.getRecordList();
        }
	}
</script>

<style lang="scss" scoped>
.wrap{
	width: 100%;
	max-height: 100vh;
	min-height: 100vh;
	overflow-x: hidden;
    background: #eee;
    position: relative;

    .add_record {
        width: 100rpx;
        height: 100rpx;
        background: #3d836d;
        border-radius: 50%;
        position: fixed;
        bottom: 120rpx;
        right: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 24rpx 12rpx rgba(202, 202, 202, 60%);
        .add_record_img {
            width: 90%;
            height: 90%;
        }
    }

	.detail_top {
        width: 100%;
        display: flex;
        padding: 38rpx 36rpx;
        // #ifdef H5
        margin-top: 82rpx;
        // #endif
        box-sizing: border-box;
        background: #3d836d;
        border-bottom-left-radius: 38rpx;
        border-bottom-right-radius: 38rpx;
        position: fixed;
        top: 0;
        z-index: 99;
        .avatar {
            width: 180rpx;
            height: 180rpx;
            border-radius: 50%;
            background: #eee;
        }
        .top_right {
            padding-left: 36rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: #fff;
            .right_box {
                display: flex;
                align-items: center;
                .box_left {
                    padding-right: 20rpx;
                    font-size: 28rpx;
                }
                .box_right {
                    font-size: 28rpx;
                }
            }
        }
    }

    .detail_content {
        width: 100%;
        padding: 0 22rpx 100rpx;
        box-sizing: border-box;
        .record_list {
            width: 100%;
            background: #fff;
            position: relative;
            padding-top: 250rpx;
            .record_item {
                padding: 32rpx 52rpx;
                box-sizing: border-box;
                border-bottom: 1rpx solid #ddd;
                .date_title {
                    font-size: 32rpx;
                }
                .date_mes {
                    text-align: right;
                    font-size: 28rpx;
                    padding-top: 20rpx;
                }
            }
        }

        .record_list:before {
            content: ' ';
            width: 0;
            height: 100%;
            position: absolute;
            /* 小球形状 */
            border-right: 18rpx dotted white;
            left: -6rpx;
            top: 0px;
        }
        // .record_list::after {
        //     content: ' ';
        //     width: 0;
        //     height: 100%;
        //     position: absolute;
        //     /* 小球形状 */
        //     border-right: 22rpx dotted white;
        //     right: -6rpx;
        //     top: 0px;
        // }
    }
}
</style>
